<!--
  文件描述：抽屉封装
  创建时间：2023/9/7 17:14
  创建人：二
-->
<template>
  <el-drawer
    :visible="visible"
    :title="title"
    :size="size"
    :show-close="showClose"
    :close-on-press-escape="closeOnPressEscape"
    :destroy-on-close="true"
    direction="rtl"
    :wrapper-closable="wrapperClosable"
    custom-class="custom-drawer"
    :before-close="beforeClose"
  >
    <m-loading class="loading-wrap" :loading="loading">
      <el-scrollbar class="scrollbar">
        <div class="main">
          <slot></slot>
        </div>
      </el-scrollbar>
      <div class="drawer-footer" v-if="$slots.footer">
        <slot name="footer" >
        </slot>
      </div>
    </m-loading>
  </el-drawer>
</template>

<script>
export default {
  name: 'MDrawer',
  props: {
    // 是否显示
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    size: {
      type: [String, Number],
      default: '40%'
    },
    // 是否显示关闭按钮
    showClose: {
      type: Boolean,
      default: false
    },
    // 是否可以通过按下 ESC 关闭 Dialog
    closeOnPressEscape: {
      type: Boolean,
      default: false
    },

    // 点击遮罩层是否可以关闭 Drawer
    wrapperClosable: {
      type: Boolean,
      default: false
    },
    // 加载状态
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  methods: {
    beforeClose() {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
// Drawer 抽屉
::v-deep .custom-drawer {
  .el-drawer__header {
    border-bottom: 1px solid #e9e9e9;
    margin-bottom: 0;
    padding: 15px;
  }
  .el-drawer__body {
    .loading-wrap {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      height: 100%;
      width: 100%;
      box-sizing: border-box;
    }
    .main {
      padding: 15px;
    }
    .scrollbar {
      flex: 1;
      overflow: hidden;
      ::v-deep .el-scrollbar__wrap {
        overflow: scroll;
        overflow-x: hidden;
      }
    }
    .drawer-footer {
      border-top: 1px solid #e9e9e9;
      padding: 10px 15px;
      text-align: right;
      background-color: #fff;
    }
  }
}
</style>
